import { connect } from "react-redux";

function World({ msg, count, add, jian }) {
  return (
    <div>
      <h4>World</h4>
      <button>MSG: {msg}</button>
      <button>COUNT: {count}</button>
      <hr />

      <button onClick={add}>自增</button>
      <button onClick={jian}>自减</button>
    </div>
  );
}

/**
 * 导出 World 时，要通过 react-redux 的 connect 做一个高阶处理
 *
 *
 * connect(mapStateToProps?, mapDispatchToProps?)
 */

/**
 * 映射 store 的 state 到被包装组件的 props 上
 *    当 仓库 state 更新时，会重新触发
 * 参数：
 *    state：store.getState() 的返回值
 *
 * 返回值：
 *    一个对象，会与组件自身的 props 合并
 */
const mapStateToProps = (state) => ({
  msg: state.msg,
  count: state.count,
});

/**
 * 映射 store 的 修改函数到被包装组件的 props 上
 *
 * 参数：
 *    dispatch: store.dispatch 的引用
 *
 * 返回值：
 *    一个对象，会与组件自身的 props 合并
 *
 * PS:
 *    当没有提供该函数时，被包装组件会收到一个 dispatch
 */
const mapDispatchToProps = (dispatch) => ({
  add: function () {
    // 直接调用 dispatch 去派发仓库的动作
    dispatch({ type: "INCREMENT" });
  },
  jian() {
    dispatch({ type: "DECREMENT" });
  },
});

/**
 * 映射 store 的 修改函数到被包装组件的 props 上
 *
 * 对象写法
 *    每一项是个函数，函数直接返回一个 动作，该动作会帮我们去做派发
 */
const mapDispatchToProps2 = {
  add: () => ({ type: "INCREMENT" }),
  jian: () => ({ type: "DECREMENT" }),
};

export default connect(mapStateToProps, mapDispatchToProps2)(World);
